<template>
  <div class="body">
    <div v-if="data[1]" class="color-legend">
      <div class="legend-item">
        <div class="color-block gray"></div>
        <span>灰色: 禁用</span>
      </div>
      <div class="legend-item">
        <div class="color-block red"></div>
        <span>红色: 占用</span>
      </div>
      <div class="legend-item">
        <div class="color-block green"></div>
        <span>绿色: 启用</span>
      </div>
      <div class="legend-item">
        <div class="color-block aisle"></div>
        <span>浅灰: 过道</span>
      </div>
      <div class="legend-item">
        <div class="color-block gap"></div>
        <span>淡灰: 间隔</span>
      </div>
    </div>
    <el-tabs v-if="data[1]" v-model="activeName" class="custom-tabs" @tab-click="handleClick">
      <el-tab-pane label="一层" name="first">
        <div class="rows-container">
          <div 
            v-for="(item, index) in data[1]" 
            :key="index"
            class="item-row"
            :class="{
              'with-gap': isGapRow(index),
              'with-aisle': isAisleRow(index)
            }"
          >
            <div class="row-number">{{ (index + 1).toString().padStart(2, '0') }}</div>
            <div class="storage-units">
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                v-for="(item2, index2) in reversedItems(item)" 
                :key="index2"
                popper-class="custom-popover"
              >
                <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
                <div
                  slot="reference"
                  :class="[
                    'pop-item',
                    { 
                      'status-success': item2.takeStatus === 0,
                      'status-warning': item2.takeStatus === 1,
                      'status-lock': item2.lockStatus === 1
                    }
                  ]"
                ></div>
              </el-popover>
            </div>
            <div v-if="isGapRow(index)" class="gap-indicator">间隔</div>
            <div v-if="isAisleRow(index)" class="aisle-indicator">过道</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="二层" name="second">
        <div class="rows-container">
          <div 
            v-for="(item, index) in data[2]" 
            :key="index"
            class="item-row"
            :class="{
              'with-gap': isGapRow(index),
              'with-aisle': isAisleRow(index)
            }"
          >
            <div class="row-number">{{ (index + 1).toString().padStart(2, '0') }}</div>
            <div class="storage-units">
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                v-for="(item2, index2) in reversedItems(item)" 
                :key="index2"
                popper-class="custom-popover"
              >
                <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
                <div
                  slot="reference"
                  :class="[
                    'pop-item',
                    { 
                      'status-success': item2.takeStatus === 0,
                      'status-warning': item2.takeStatus === 1,
                      'status-lock': item2.lockStatus === 1
                    }
                  ]"
                ></div>
              </el-popover>
            </div>
            <div v-if="isGapRow(index)" class="gap-indicator">间隔</div>
            <div v-if="isAisleRow(index)" class="aisle-indicator">过道</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="三层" name="third">
        <div class="rows-container">
          <div 
            v-for="(item, index) in data[3]" 
            :key="index"
            class="item-row"
            :class="{
              'with-gap': isGapRow(index),
              'with-aisle': isAisleRow(index)
            }"
          >
            <div class="row-number">{{ (index + 1).toString().padStart(2, '0') }}</div>
            <div class="storage-units">
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                v-for="(item2, index2) in reversedItems(item)" 
                :key="index2"
                popper-class="custom-popover"
              >
                <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
                <div
                  slot="reference"
                  :class="[
                    'pop-item',
                    { 
                      'status-success': item2.takeStatus === 0,
                      'status-warning': item2.takeStatus === 1,
                      'status-lock': item2.lockStatus === 1
                    }
                  ]"
                ></div>
              </el-popover>
            </div>
            <div v-if="isGapRow(index)" class="gap-indicator">间隔</div>
            <div v-if="isAisleRow(index)" class="aisle-indicator">过道</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="四层" name="fourth">
        <div class="rows-container">
          <div 
            v-for="(item, index) in data[4]" 
            :key="index"
            class="item-row"
            :class="{
              'with-gap': isGapRow(index),
              'with-aisle': isAisleRow(index)
            }"
          >
            <div class="row-number">{{ (index + 1).toString().padStart(2, '0') }}</div>
            <div class="storage-units">
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                v-for="(item2, index2) in reversedItems(item)" 
                :key="index2"
                popper-class="custom-popover"
              >
                <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
                <div
                  slot="reference"
                  :class="[
                    'pop-item',
                    { 
                      'status-success': item2.takeStatus === 0,
                      'status-warning': item2.takeStatus === 1,
                      'status-lock': item2.lockStatus === 1
                    }
                  ]"
                ></div>
              </el-popover>
            </div>
            <div v-if="isGapRow(index)" class="gap-indicator">间隔</div>
            <div v-if="isAisleRow(index)" class="aisle-indicator">过道</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="五层" name="fifth">
        <div class="rows-container">
          <div 
            v-for="(item, index) in data[5]" 
            :key="index"
            class="item-row"
            :class="{
              'with-gap': isGapRow(index),
              'with-aisle': isAisleRow(index)
            }"
          >
            <div class="row-number">{{ (index + 1).toString().padStart(2, '0') }}</div>
            <div class="storage-units">
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                v-for="(item2, index2) in reversedItems(item)" 
                :key="index2"
                popper-class="custom-popover"
              >
                <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
                <div
                  slot="reference"
                  :class="[
                    'pop-item',
                    { 
                      'status-success': item2.takeStatus === 0,
                      'status-warning': item2.takeStatus === 1,
                      'status-lock': item2.lockStatus === 1
                    }
                  ]"
                ></div>
              </el-popover>
            </div>
            <div v-if="isGapRow(index)" class="gap-indicator">间隔</div>
            <div v-if="isAisleRow(index)" class="aisle-indicator">过道</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="六层" name="sixth">
        <div class="rows-container">
          <div 
            v-for="(item, index) in data[6]" 
            :key="index"
            class="item-row"
            :class="{
              'with-gap': isGapRow(index),
              'with-aisle': isAisleRow(index)
            }"
          >
            <div class="row-number">{{ (index + 1).toString().padStart(2, '0') }}</div>
            <div class="storage-units">
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                v-for="(item2, index2) in reversedItems(item)" 
                :key="index2"
                popper-class="custom-popover"
              >
                <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
                <div
                  slot="reference"
                  :class="[
                    'pop-item',
                    { 
                      'status-success': item2.takeStatus === 0,
                      'status-warning': item2.takeStatus === 1,
                      'status-lock': item2.lockStatus === 1
                    }
                  ]"
                ></div>
              </el-popover>
            </div>
            <div v-if="isGapRow(index)" class="gap-indicator">间隔</div>
            <div v-if="isAisleRow(index)" class="aisle-indicator">过道</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="七层" name="seventh">
        <div class="rows-container">
          <div 
            v-for="(item, index) in data[7]" 
            :key="index"
            class="item-row"
            :class="{
              'with-gap': isGapRow(index),
              'with-aisle': isAisleRow(index)
            }"
          >
            <div class="row-number">{{ (index + 1).toString().padStart(2, '0') }}</div>
            <div class="storage-units">
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                v-for="(item2, index2) in reversedItems(item)" 
                :key="index2"
                popper-class="custom-popover"
              >
                <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
                <div
                  slot="reference"
                  :class="[
                    'pop-item',
                    { 
                      'status-success': item2.takeStatus === 0,
                      'status-warning': item2.takeStatus === 1,
                      'status-lock': item2.lockStatus === 1
                    }
                  ]"
                ></div>
              </el-popover>
            </div>
            <div v-if="isGapRow(index)" class="gap-indicator">间隔</div>
            <div v-if="isAisleRow(index)" class="aisle-indicator">过道</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="八层" name="eighth">
        <div class="rows-container">
          <div 
            v-for="(item, index) in data[8]" 
            :key="index"
            class="item-row"
            :class="{
              'with-gap': isGapRow(index),
              'with-aisle': isAisleRow(index)
            }"
          >
            <div class="row-number">{{ (index + 1).toString().padStart(2, '0') }}</div>
            <div class="storage-units">
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                v-for="(item2, index2) in reversedItems(item)" 
                :key="index2"
                popper-class="custom-popover"
              >
                <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
                <div
                  slot="reference"
                  :class="[
                    'pop-item',
                    { 
                      'status-success': item2.takeStatus === 0,
                      'status-warning': item2.takeStatus === 1,
                      'status-lock': item2.lockStatus === 1
                    }
                  ]"
                ></div>
              </el-popover>
            </div>
            <div v-if="isGapRow(index)" class="gap-indicator">间隔</div>
            <div v-if="isAisleRow(index)" class="aisle-indicator">过道</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="九层" name="ninth">
        <div class="rows-container">
          <div 
            v-for="(item, index) in data[9]" 
            :key="index"
            class="item-row"
            :class="{
              'with-gap': isGapRow(index),
              'with-aisle': isAisleRow(index)
            }"
          >
            <div class="row-number">{{ (index + 1).toString().padStart(2, '0') }}</div>
            <div class="storage-units">
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                v-for="(item2, index2) in reversedItems(item)" 
                :key="index2"
                popper-class="custom-popover"
              >
                <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
                <div
                  slot="reference"
                  :class="[
                    'pop-item',
                    { 
                      'status-success': item2.takeStatus === 0,
                      'status-warning': item2.takeStatus === 1,
                      'status-lock': item2.lockStatus === 1
                    }
                  ]"
                ></div>
              </el-popover>
            </div>
            <div v-if="isGapRow(index)" class="gap-indicator">间隔</div>
            <div v-if="isAisleRow(index)" class="aisle-indicator">过道</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="十层" name="tenth">
        <div class="rows-container">
          <div 
            v-for="(item, index) in data[10]" 
            :key="index"
            class="item-row"
            :class="{
              'with-gap': isGapRow(index),
              'with-aisle': isAisleRow(index)
            }"
          >
            <div class="row-number">{{ (index + 1).toString().padStart(2, '0') }}</div>
            <div class="storage-units">
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                v-for="(item2, index2) in reversedItems(item)" 
                :key="index2"
                popper-class="custom-popover"
              >
                <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
                <div
                  slot="reference"
                  :class="[
                    'pop-item',
                    { 
                      'status-success': item2.takeStatus === 0,
                      'status-warning': item2.takeStatus === 1,
                      'status-lock': item2.lockStatus === 1
                    }
                  ]"
                ></div>
              </el-popover>
            </div>
            <div v-if="isGapRow(index)" class="gap-indicator">间隔</div>
            <div v-if="isAisleRow(index)" class="aisle-indicator">过道</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { EventSourcePolyfill } from 'event-source-polyfill'
export default {
  data() {
    return {
      data: [],
      activeName: 'first',
      es: null
    }
  },
  mounted() {
    this.createSSE()
  },
  methods: {
    reversedItems(items) {
      return [...items].reverse()
    },
    isGapRow(index) {
      return [1, 4, 6, 8].includes(index)
    },
    isAisleRow(index) {
      return index === 3
    },
    createSSE() {
      // const baseURL = process.env.VUE_APP_BASE_API
      this.es = new EventSourcePolyfill(`/api/sse/storageDashboard`)
      this.es.onopen = () => {
        console.log('连接成功')
      }
      this.es.onclose = () => {
        console.log('连接断开')
      }
      this.es.onmessage = (e) => {
        const parsedData = JSON.parse(e.data)
        this.data = parsedData.data.storage.xPathWithStorageVo
      }
      this.es.onerror = (err) => {
        this.handleError() 
        console.log(err)
      }
    },
    handleError() {
      if (this.es.readyState === EventSourcePolyfill.CLOSED) {
        this.es.close()
      } else if (this.es.readyState === EventSourcePolyfill.CONNECTING) {
        console.log('正在重连中')
      }
    },
    handleClick(tab) {
      this.activeName = tab.name
    }
  }
}
</script>

<style scoped lang="less">
// 先定义变量，再使用变量
@pop-item-size: 36px;
@quarter-size: @pop-item-size / 4;
@single-size: @pop-item-size;
@triple-size: @pop-item-size * 3;

.body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: visible;
}

.custom-tabs {
  width: 100%;
  max-width: 95%;
  flex: 8;
  
  :deep(.el-tabs__header) {
    margin-bottom: 30px;
    border-bottom: 1px solid #4e5969;
    display: flex;
    justify-content: center;
  }
  
  :deep(.el-tabs__item) {
    color: #fff !important;
    height: 50px;
    width: 80px;
    line-height: 50px;
    text-align: center;
    &.is-active {
      font-weight: 700;
    }
  }
  
  :deep(.el-tabs__active-bar) {
    background-color: #909399;
  }
  
  :deep(.el-tabs__content) {
    padding: 10px;
    overflow-x: visible;
    display: flex;
    justify-content: center;
  }
}

.rows-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  position: relative; /* 作为间隔线的定位容器 */
}

.item-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px 0;
  gap: 15px;
  position: relative;
  
  &:nth-child(1) { margin-bottom: @quarter-size; }
  &:nth-child(2) { margin-bottom: @single-size; }
  &:nth-child(3) { margin-bottom: @quarter-size; }
  &:nth-child(4) { margin-bottom: @triple-size; }
  &:nth-child(5) { margin-bottom: @single-size; }
  &:nth-child(6) { margin-bottom: @quarter-size; }
  &:nth-child(7) { margin-bottom: @single-size; }
  &:nth-child(8) { margin-bottom: @quarter-size; }
  &:nth-child(9) { margin-bottom: @single-size; }
  &:nth-child(10) { margin-bottom: 0; }
}

// 间隔线样式（贯穿整个容器宽度）
.with-gap {
  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -@single-size/2;
    height: 1px;
    background-color: #909399;
    opacity: 0.7;
    z-index: 10; /* 提高层级避免被覆盖 */
  }
}

// 过道样式（贯穿整个容器宽度）
.with-aisle {
  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -@triple-size/2;
    height: 1px;
    background-color: #606266;
    opacity: 0.9;
    z-index: 10; /* 提高层级避免被覆盖 */
  }
}

// 为间隔和过道添加辅助阴影，增强视觉效果
.with-gap {
  &::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -@single-size/2;
    height: @single-size;
    background: linear-gradient(to bottom, rgba(144, 147, 153, 0.1), transparent);
    z-index: 9;
  }
}

.with-aisle {
  &::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -@triple-size/2;
    height: @triple-size;
    background: linear-gradient(to bottom, rgba(96, 98, 102, 0.15), transparent);
    z-index: 9;
  }
}

.storage-units {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}

.row-number {
  width: 40px;
  height: 40px;
  background-color: #4e5969;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: bold;
  flex-shrink: 0;
}

.gap-indicator, .aisle-indicator {
  width: 40px;
  height: 20px;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

// 储位矩形块样式
.pop-item {
  width: @pop-item-size;
  height: @pop-item-size;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.1) inset,
    0 2px 4px rgba(0, 0, 0, 0.1);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
    pointer-events: none;
  }
  
  &:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(0, 0, 0, 0.1) inset;
    z-index: 10;
  }
}

.status-success {
  background: linear-gradient(135deg, #52c41a 0%, #7ccc59 100%);
  
  box-shadow: 
    0 2px 4px rgba(82, 196, 26, 0.2),
    0 0 0 1px rgba(82, 196, 26, 0.3) inset;
}

.status-warning {
  background: linear-gradient(135deg, #f5222d 0%, #f86a71 100%);
  
  box-shadow: 
    0 2px 4px rgba(245, 34, 45, 0.2),
    0 0 0 1px rgba(245, 34, 45, 0.3) inset;
}

.status-lock {
  background: linear-gradient(135deg, #787878 0%, #a9a9a9 100%);
  
  box-shadow: 
    0 2px 4px rgba(120, 120, 120, 0.2),
    0 0 0 1px rgba(120, 120, 120, 0.3) inset;
}

:deep(.custom-popover) {
  :deep(.el-popover__content) {
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  }
}

.popover-content {
  font-size: 14px;
  color: #303133;
}

.color-legend {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-bottom: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #fff;
}

.color-block {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
  }
}

.gray {
  background: linear-gradient(135deg, #787878 0%, #a9a9a9 100%);
}

.red {
  background: linear-gradient(135deg, #f5222d 0%, #f86a71 100%);
}

.green {
  background: linear-gradient(135deg, #52c41a 0%, #7ccc59 100%);
}

.gap {
  background-color: #909399;
  opacity: 0.5;
}

.aisle {
  background-color: #606266;
  opacity: 0.7;
}

@media screen and (max-width: 1200px) {
  @pop-item-size: 32px;
  @quarter-size: @pop-item-size / 4;
  @single-size: @pop-item-size;
  @triple-size: @pop-item-size * 3;
  
  .pop-item {
    width: @pop-item-size;
    height: @pop-item-size;
  }
  .storage-units {
    gap: 10px;
  }
}

@media screen and (max-width: 768px) {
  @pop-item-size: 28px;
  @quarter-size: @pop-item-size / 4;
  @single-size: @pop-item-size;
  @triple-size: @pop-item-size * 3;
  
  .pop-item {
    width: @pop-item-size;
    height: @pop-item-size;
  }
  .storage-units {
    gap: 8px;
  }
  .color-legend {
    gap: 15px;
    margin-bottom: 15px;
  }
  .row-number {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
}
</style>